{# flask网页对话程序， 调用zhipuAI库client.chat.completition，
# 用户在网页底部从input栏输入一个问题, 点击提交，使用glm-4-flash模型输出一个回答补全对话，并直接显示在网页上。
# 不显示历史记录，但将所有的问题和回答都保存在sqlite3数据库history.sqlite3内。
# 点击页面顶部的历史记录按钮时，从数据库提取记录显示在当前网页上。
#}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flask Web App</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        header {
            background-color: #333;
            color: #fff;
            padding: 10px;
            text-align: center;
        }

        main {
            padding: 20px;
        }

        .chat-container {
            max-width: 600px;
            margin: 0 auto; /* 居中显示 */  
        }

        .chat-message {
            margin-bottom: 10px;
            padding: 10px;
            border-radius: 5px;
            max-width: 80%;
            display: inline-block;
        }

        .user-message {
            background-color: #e0e0e0;
            float: right;
        }

        .bot-message {
            
        }
        .bot-message {
            background-color: #f0f0f0;
            float: left;
        }

        .chat-input {
            margin-top: 20px;
        }

        .history-button {
            margin-top: 20px;
        }

        .text-container {
            width: 600px; /* 设置div的宽度 */
            height: 150px; /* 设置div的高度 */
            overflow: auto; /* 当内容超出div大小时显示滚动条 */
            border: 1px solid #ccc; /* 为了更好地看到div的边界 */
            padding: 10px; /* 给内容添加一些内边距 */
            margin: 10px; /* 给div添加外边距 */
        }

    </style>
</head>
<body>
    <header>
        <h1>Flask Web App</h1>
    </header>
    <main>
        <div class="chat-container">
            {% for message in messages %}
                <div class="chat-message {{ message['role'] }}">
                    {{ message['content'] }}
                </div>
            {% endfor %}
        </div>
        <div class="chat-input">
            <form action="/submit" method="post">
                <input type="text" name="question" placeholder="Enter your message">
                <button type="submit">Send</button></br></br>
                <div class="text-container">
                {# <input type="text" name="answer" value="{{ answer }}" readonly> #}
                {{ answer }}
                </div>
            </form>
        </div>
        <form action="{{ url_for('clear') }}" method="post">
            <input type="submit" value="Clear Database" onclick="return confirm('Are you sure you want to clear the database?')">
        </form>
        {# <div class="history-button">
            <button onclick="window.location.href='/'">History</button>
        </div> 
        #}
        <div class='result'>
            {#  <h2>History</h2>          #}
            <ul>
                {% for message in history %}
                    <li>{{ message }}</li>
                {% endfor %}
            </ul>
        </div>
    </main>
</body>
</html>
